@extends('layouts.home')
@section('title', '沃势管理后台')
@section('style')
    <link href="../plugins/multiselect/css/multi-select.css"  rel="stylesheet" type="text/css" />
    <link href="../plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="../plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="css/colorbox.css" />
    <link href="../plugins/bootstrap-sweetalert/sweet-alert.css" rel="stylesheet" type="text/css">
@endsection
@section('content')
    <div class="row">
        <div class="col-sm-12">
            <div class="card-box">
                <div class="row">
                    <div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                        <div class="modal-dialog">
                            <form id="role-create" action="{{ route('setting.role.store') }}">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h4 class="modal-title">新增角色</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="field-3" class="control-label">角色名</label>
                                                <input type="text" name="name" class="form-control" id="field-3" >
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group no-margin">
                                                <label for="field-7" class="control-label">描述</label>
                                                <textarea class="form-control autogrow" id="field-7" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 104px;" name="desc"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">关闭</button>
                                    <button type="submit" class="btn btn-info waves-effect waves-light">保存</button>
                                </div>
                            </div>
                        </form>
                        </div>
                    </div><!-- /.modal -->

                    <div id="edit-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                        <div class="modal-dialog">
                            <form id="role-edit" action="" method="post">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 class="modal-title">修改角色</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="field-3" class="control-label">角色名</label>
                                                    <input type="text" name="name" class="form-control" id="field-name" >
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group no-margin">
                                                    <label for="field-desc" class="control-label">描述</label>
                                                    <textarea class="form-control autogrow" id="field-desc" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 104px;" name="desc"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <input type="hidden" name="id"  id="field-id" >
                                        {{ csrf_field() }}
                                        <input type="hidden" name="_method" value="PUT">
                                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">关闭</button>
                                        <button type="submit" class="btn btn-info waves-effect waves-light">保存</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div><!-- /.modal -->

                    <form action="" method="get">
                        <div class="col-sm-1">
                            <select class="form-control select2" name="id">
                                <option value="">请选择角色</option>
                                @foreach($role as $r)
                                <option value="{{ $r->id }}" @if($r->id == request('id'))) selected @endif>{{ $r->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-3">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-primary waves-effect w-md m-b-1">查询</button>
                            </span>
                        </div>
                        <div align="right">
                            <a class="btn btn-default waves-effect" data-toggle="modal" data-target="#con-close-modal"><i class="glyphicon glyphicon-plus"></i></a>
                            <a class="btn btn-danger deleteall" data-toggle="tooltip"  data-original-title="删除" data-href="{{ route('setting.role.destroy.all') }}"><i class="glyphicon glyphicon-trash"></i></a>
                        </div>
                    </form>
                    <div class="col-sm-3">

                    </div>
                </div>
            </div>
            <div class="card-box">
                <div class="table-rep-plugin">
                    <div class="table-responsive" data-pattern="priority-columns">
                        <table class="tablesaw table m-b-0" data-tablesaw-mode="swipe" data-tablesaw-mode-switch data-tablesaw-minimap>
                            <thead>
                            <tr>
                                <th>
                                    <div class="checkbox checkbox-primary checkbox-single" style="margin-top: 0!important; margin-bottom: 0!important;">
                                        <input type="checkbox" id="selectall">
                                        <label for="selectall"></label>
                                    </div>
                                </th>
                                <th>ID</th>
                                <th>角色名</th>
                                <th>描述</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($roles as $r)
                                <tr>
                                    <td>
                                        <div class="checkbox checkbox-primary checkbox-single" style="margin-top: 0!important; margin-bottom: 0!important;">
                                            <input type="checkbox" name="id" id="id-{{ $r->id }}"
                                                   value="{{ $r->id }}" class="selectall-item"/>
                                            <label for="id-{{ $r->id }}"></label>
                                        </div>
                                    </td>
                                    <td>{{ $r->id }}</td>
                                    <td>{{ $r->name }}</td>
                                    <td>{{ $r->desc }}</td>
                                    <td>{{ $r->created_at }}</td>
                                    <td>
                                       <a class="btn btn-default btn-sm edit" data-toggle="modal" data-target="#edit-close-modal" data-value="{{ $r->id.'-'.$r->name.'-'.$r->desc }}" data-href="{{ route('setting.role.update', ['id' => $r->id]) }}"><i class="fa fa-pencil"></i> 修改</a>
                                        <a class="btn btn-info btn-sm view" href="{{ route('setting.role.permission',['id'=>$r->id]) }}"><i class="fa fa-wrench"></i> 权限</a>
                                        <a class="btn btn-danger btn-sm role-delete" data-href="{{ route('setting.role.destroy', ['id' => $r->id]) }}"><i class="fa fa-trash-o"></i> 删除</a>
                                    </td>
                                </tr>
                            @endforeach

                            </tbody>
                        </table>
                    </div>
                    <div align="right">
                        {{ $roles->links() }}
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!-- end row -->
@section('script')
    <script src="../plugins/select2/js/select2.min.js" type="text/javascript"></script>
    <script src="../plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.colorbox.js"></script>
    <script src="../plugins/bootstrap-sweetalert/sweet-alert.min.js"></script>
    <script src="{{ asset('js/ajax.js') }}"></script>
    <script>
        $('.select2').select2();
        $(".view").colorbox({width:"80%", height:"90%", iframe:true});
        $('.edit').click(function(){
            var editdata = $(this).data('value');
            var arr = editdata.split('-');
            $('#role-edit').attr('action', $(this).data('href'));
            $('#edit-close-modal').on('show.bs.modal', function (event) {
                var modal = $(this);
                modal.find('#field-name').val(arr[1]);
                modal.find('#field-desc').val(arr[2]);
                modal.find('#field-id').val(arr[0]);
            });
        });
        $('#role-create,#role-edit').submit(function(){
            var self = $(this);
            $.post(self.attr("action"), self.serialize(), success, "json").fail(function (res) {
                console.log(res);
                layer.msg(res.responseJSON.join('<br>'));
            });
            return false;
            function success(res) {
                if (res.ack) location.reload();
                layer.msg(res.msg);
            }
        });
        $(".role-delete").click(function () {
            Rbac.ajax.delete({
                confirmTitle: '确定删除角色?',
                href: $(this).data('href'),
                successTitle: '角色删除成功'
            });
        });
        $(".deleteall").click(function () {
            Rbac.ajax.deleteAll({
                confirmTitle: '确定删除选中的角色?',
                href: $(this).data('href'),
                successTitle: '角色删除成功'
            });
        });
    </script>
@endsection
@stop